<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>6.5</title>

	</head>
	<style>
		.book-list {
			border: 1px solid;
			padding: 20px;
			display: inline-block;
			background: rgb(56, 131, 216);
			color: #fff;
		}
	</style>
		<script src="js/vue.js"></script>
	<body>
		<div id="app">
			<!--kebab-case注册可以用kebab-case使用-->
			<people-list></people-list>
			
			<!--kebab-case注册不能用PascalCase使用-->
			<!--<PeopleList></PeopleList>-->
			
			<!--PascalCase注册可以用kebab-case使用-->
			<book-item1></book-item1>
			<!--PascalCase注册在DOM中不能用PascalCase使用-->
			<!--<BookItem2></BookItem2>-->
			
			<book-list></book-list>
		</div>
	</body>
	<script type="text/x-template" id="people-list">
		<ul>
			<li>tom</li>
			<li>jerry</li>
			<li>kevin</li>
		</ul>
	</script>
	<script>
		Vue.component('people-list',{
			template: '#people-list'
		})
		Vue.component('BookItem1',{
			template: '<div> 书名: 《西游记》<div>'
		})
		Vue.component('BookItem2',{
			template: '<div> 书名: 《三国演义》<div>'
		})
		//
		Vue.component('BookList',{
			template:`<ul class="book-list">
			     <li><BookItem1></BookItem></li>
				 <li><BookItem2></BookItem2></li>
				</ul>`
		})
		let vm = new Vue({
			el:'#app'
		})
	</script>
</html>